import React from 'react';

//创建虚拟 DOM
export default class DiffShow extends React.Component {
  state = {
    heros: [
      { id: 1, name: "孙膑", type: "辅助" },
      { id: 2, name: "小乔", type: "中单" },
      { id: 3, name: "扁鹊", type: "法师" },
    ],
  };

  //单击事件  新增英雄
  addHero = () => {
    //获取名字
    let name = this.name.value;
    let type = this.type.value;
    //拼接一个对象
    let obj = {
      name,
      type,
      id: this.state.heros.length + 1,
    };

    //更新状态
    this.setState({
      heros: [obj, ...this.state.heros],
    });
  };

  render() {
    return (
      <div>
        <h2>王者荣耀</h2>
        名称:
        <input type="text" ref={(el) => (this.name = el)} />
        类型:
        <input type="text" ref={(el) => (this.type = el)} />
        <button onClick={this.addHero}>添加</button>
        <hr />
        <table border="1" className='table'>
          <thead>
            <tr>
              <td>ID</td>
              <td>名字</td>
              <td>类型</td>
              <td></td>
            </tr>
          </thead>
          <tbody>
            {this.state.heros.map((item, index) => {
              return (
                <tr key={item.id}>
                  <td>{item.id}</td>
                  <td>{item.name}</td>
                  <td>{item.type}</td>
                  <td>
                    <input type="text" />
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }
}